<template>
  <div>
    <el-drawer
      width="1000px"
      title="课程详情"
      :visible.sync="isShowDetail"
      :before-close="closeDrawer"
      size="1000px"
      class="dialog-siteFixedReserve"
    >
      <div class="df_sb header">
        <div class="left df">
          <img
            class="img"
            :src="detail.courseImageUrl"
            alt=""
          >
          <div class="content">
            <div>
              <span>{{ detail.courseName }}</span>
              <span class="primaryColor ml10 fs12">{{
                detail.courseType == "1" ? "团体课" : "长期课"
              }}</span>
              <span class="primaryColor ml10 fs12">{{
                detail.status == "1"
                  ? "待发布/下架"
                  : detail.status == "2"
                    ? "报名中"
                    : detail.status == "3"
                      ? "报名已截止"
                      : detail.status == "4"
                        ? "进行中"
                        : detail.status == "5"
                          ? "已结束"
                          : "已取消"
              }}</span>
            </div>
            <div>
              <span class="placeholder9 fs12">{{ detail.muml == '0' ? '缺课不补课' : '缺课补课' }}</span>
            </div>
            <div>
              <span class="mr20">课时数：{{ detail.classNum }}</span>
              <span>创建时间：{{ detail.createTime }}</span>
            </div>
          </div>
        </div>
        <div class="right">
          <span class="placeholder9">¥：</span>
          <span class="red">{{ detail.price }}</span>
        </div>
      </div>
      <el-form ref="ruleForm" :model="detail" class="siteDetails mt20">
        <el-form-item label="授课教练:" class="form-item">
          <span>{{ detail.teacherName }}</span>
        </el-form-item>
        <el-form-item label="上课地点:" class="form-item">
          <span>{{ detail.site }}</span>
        </el-form-item>
        <el-form-item label="课程人数:" class="form-item">
          <span>{{ detail.numLimit == '1' ? '不限' : detail.peopleNum }}</span>
        </el-form-item>
        <el-form-item label="开课时间:" class="form-item">
          <span>{{ detail.beginDate || '-' }}</span>
        </el-form-item>
        <el-form-item label="结课时间:" class="form-item">
          <span>{{ detail.courseEndDate || '-' }}</span>
        </el-form-item>
        <el-form-item label="报名截止时间:" class="form-item">
          <span>{{ detail.endTime || '-' }}</span>
        </el-form-item>
        <el-form-item label="课程介绍:" class="form-item">
          <span>{{ detail.introduction }}</span>
        </el-form-item>
      </el-form>

      <div class="property-title">会员折扣</div>
      <div>
        <div class="flex1">
          <span class="key">折扣类型：</span>
          <span class="value">{{
            detail.discountType === "1" ? "自定义折扣" : "默认折扣"
          }}</span>
        </div>
      </div>
      <div v-if="detail.discountType === '1'" class="mt20 discount_wrap">
        <div v-for="item in vipTypes" :key="item.id" class="discount">
          <span v-if="item && item.name" class="key">{{ item.name }}：</span>
          <span class="value">{{ item.value * 10 }}折</span>
        </div>
      </div>
      <div class="property-title" style="margin-top: 20px">学员信息</div>
      <div class="doumee-filter">
        <el-input
          v-model="studentForm.memberName"
          placeholder="请输入会员信息"
          clearable
        />
        <el-input
          v-model="studentForm.name"
          placeholder="请输入学员姓名"
          clearable
        />
        <el-button
          v-preventReClick
          type="primary"
          @click="getStudentList(1)"
        >查找</el-button>
        <el-button v-preventReClick @click="clearFilter">清空</el-button>
      </div>
      <el-table
        :data="studentData"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table"
      >
        <el-table-column
          align="center"
          min-width="180"
          label="会员信息"
          show-overflow-tooltip
          prop="memberName"
        />
        <el-table-column
          align="center"
          min-width="110"
          show-overflow-tooltip
          label="学员姓名"
          prop="name"
        />
        <el-table-column
          align="center"
          min-width="160"
          label="学员证件号"
          prop="cardNo"
          show-overflow-tooltip
        />
        <el-table-column align="center" min-width="80" label="性别" prop="sex">
          <template slot-scope="scope">
            {{ scope.row.sex == 0 ? "保密" : scope.row.sex == 1 ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="出生日期"
          min-width="110"
          prop="birthday"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.birthday ? scope.row.birthday.slice(0, 10) : "" }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="100"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <div class="flex-cc">
              <el-button
                v-if="meta.indexOf('UpdateCourseStudentInfo') > -1"
                type="text"
                @click="editStudent(scope.row)"
              >编辑</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Paginations
        :total="totalS"
        :page="paginationS.page"
        @current-change="getStudentList"
        @SizeChange="handleSizeChangeb"
      />
    </el-drawer>
    <el-dialog
      title="编辑学员"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showStudent"
    >
      <el-form
        ref="formStudent"
        :model="formStudent"
        label-width="120px"
        :rules="ruleb"
      >
        <el-form-item prop="name" label="学员姓名">
          <el-input
            v-model="formStudent.name"
            maxlength="20"
            placeholder="请输入学员姓名"
            clearable
          />
        </el-form-item>
        <el-form-item prop="sex" label="性别">
          <el-select
            v-model="formStudent.sex"
            style="width: 100%"
            placeholder="请选择性别"
          >
            <el-option value="1" label="男" />
            <el-option value="2" label="女" />
            <el-option value="0" label="未知" />
          </el-select>
        </el-form-item>
        <el-form-item prop="cardNo" label="学员证件号">
          <el-input
            v-model="formStudent.cardNo"
            maxlength="18"
            placeholder="请输入学员证件号"
            clearable
          />
        </el-form-item>
        <el-form-item prop="birthday" label="出生日期">
          <el-date-picker
            v-model="formStudent.birthday"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择出生日期"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showStudent = false">取消</el-button>
        <el-button
          v-preventReClick
          :loading="studentLoading"
          type="primary"
          @click="onSubmitb"
        >确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { infoCourse, kcStudentList, kcStudentEdit, cardList } from '@/api'
export default {
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      modalDialog: this.$store.getters.dialog,
      isShowDetail: false,
      detail: {},

      vipTypes: [],

      studentForm: {},
      studentLoading: false,
      paginationS: {
        page: 1,
        rows: 10
      },
      totalS: 0,
      studentData: [],

      showStudent: false,
      formStudent: {},
      ruleb: {
        name: [{ required: true, message: '请输入学员姓名', trigger: 'blur' }]
      }
    }
  },
  created() {
  },
  methods: {
    showDetail(row) {
      infoCourse({ param: { courseId: row.courseId }})
        .then((res) => {
          if (res.errorCode === '000000') {
            this.detail = {
              ...res.record,
              courseType: row.courseType,
              status: row.status,
              teacherName: row.teacherName,
              createTime: row.createTime,
              peopleNum: row.peopleNum
            }
            cardList({
              pagination: {
                page: 1,
                rows: 1000,
                firstQueryTime: this.firstQueryTime
              },
              param: {
                cardName: null,
                isnormal: null,
                channel: null,
                type: '1'
              }
            }).then(res2 => {
              if (res.record.discountType === '1') {
                this.vipTypes = []
                res2.recordList.forEach((item) => {
                  if (item.status === '1') {
                    this.vipTypes.push({
                      name: item.cardName,
                      id: item.id,
                      value: res.record.discountMap[item.id] || 1
                    })
                  }
                })
              }
            })
            this.getStudentList(1)
          }
        })
        .catch((err) => {
          console.log(err)
        })
      this.$nextTick(() => {
        this.isShowDetail = true
      })
    },
    getStudentList(page) {
      const { studentForm } = this
      const pagination = this.paginationS
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
      }
      this.paginationS = pagination
      studentForm.courseId = this.detail.courseId
      kcStudentList({ pagination, param: { venueId, ...studentForm }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.studentData = res.recordList || []
          this.totalS = res.totalCount
        })
    },
    closeDrawer() {
      this.isShowDetail = false
      this.$emit('close')
    },
    editStudent(row) {
      const obj = { ...row }
      if (obj.birthday) {
        obj.birthday = obj.birthday.slice(0, 10)
      }
      this.formStudent = obj
      this.showStudent = true
    },
    clearFilter() {
      this.studentForm = {}
      this.getStudentList(1)
    },
    onSubmitb() {
      this.$refs.formStudent.validate((valid) => {
        if (valid) {
          const param = { ...this.formStudent }
          if (param.birthday) {
            param.birthday = param.birthday + ' 00:00:00'
          }
          this.studentLoading = true
          kcStudentEdit({
            param
          })
            .then((res) => {
              this.studentLoading = false
              if (res.errorCode === '000000') {
                this.$message.success('修改成功')
                this.showStudent = false
                this.getStudentList(1)
              }
            })
            .catch((err) => {
              this.studentLoading = false
              console.log(err)
            })
        }
      })
    },
    handleSizeChangeb(value) {
      this.paginationS.rows = value
      this.getStudentList(1)
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  .left {
    .img {
      width: 120px;
      height: 60px;
      margin-right: 10px;
    }
    .content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
  .right {
    display: flex;
    .item {
      margin-left: 20px;
      .num {
        margin-top: 10px;
      }
    }
  }
}
.coachList {
  display: flex;
  width: 100%;
  overflow: auto;
  .item {
    flex-shrink: 0;
    width: 120px;
    height: 160px;
    text-align: center;
    background-color: #f7f7f7;
    margin-right: 20px;
    .img {
      width: 60px;
      height: 60px;
      margin: 10px 0;
      border-radius: 50%;
      overflow: hidden;
    }
  }
}
.siteDetails {
  display: flex;
  flex-wrap: wrap;
  .form-item {
    width: 33.33%;
    display: flex;
    margin-right: 0%;
    margin-bottom: 5px;
    ::v-deep .el-form-item__content {
      flex: 1;
    }
    ::v-deep .el-date-editor {
      width: 100%;
    }
  }
}
.discount_wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .key {
    width: 90px;
  }
  .discount {
    width: 33.33%;
    margin-bottom: 20px;
  }
}
</style>
